<template>
    <view>
        <view class="list">
            <block v-for="(item, index) in list" :key="index">
                <view class="item flex align-center" @click="onDetail(item)">
                    <view class="file">
                        <image :src="item.image" />
                    </view>

                    <view class="right flex column just-between">
                        <view class="one flex align-base just-between">
                            <view class="title fb-30 limit-num-line">
                                {{ item.name }}
                            </view>

                            <view class="num f-24">
                                {{ item.total_sales }}人已体验
                            </view>
                        </view>

                        <view class="sign-bg flex" scroll-x>
                            <block
                                v-for="(sign, idx) in item.subtitle.split('|')"
                                :key="idx"
                            >
                                <view class="sign f-26">{{ sign }}</view>
                            </block>
                        </view>

                        <view class="bottom flex align-end">
                            <view class="time f-20">
                                {{ item.duration_time }}分钟
                            </view>

                            <view class="price flex align-base">
                                <text class="f-26">¥</text>
                                <text class="f-40">{{ item.price }}</text>
                            </view>

                            <view class="old-price f-26">
                                ￥{{ item.original_price }}
                            </view>
                        </view>

                        <view class="btn f-26"> 查看详情 </view>
                    </view>
                </view>
            </block>
        </view>
    </view>
</template>

<script>
export default {
    props: {
        list: {
            type: Array,
            default: [],
        },
    },
    data() {
        return {
            
        };
    },
    methods: {
        /**
         * 详情
         */
        onDetail(item) {
            uni.navigateTo({
                url: `/subPages/technician/home/serviceDetail?id=${item.id}`,
            });
        },
       
    },
};
</script>

<style lang="scss" scoped>
.list {
    width: 100%;
    overflow: hidden;
    padding: 20rpx;
    box-sizing: border-box;

    .item {
        width: 100%;
        background: white;
        margin-bottom: 20rpx;
        border-radius: 20rpx;
        overflow: hidden;
        padding: 30rpx 20rpx;
        box-sizing: border-box;

        &:last-child {
            margin-bottom: 0rpx;
        }

        .file {
            width: 176rpx;
            height: 176rpx;
            border-radius: 20rpx;
            overflow: hidden;

            > image {
                width: 100%;
                height: 100%;
            }
        }

        .right {
            margin-left: 20rpx;
            flex: 1;
            overflow: hidden;
            min-height: 144rpx;
            position: relative;

            .one {
                width: 100%;
                overflow: hidden;

                .title {
                    --limit-num: 1;
                    margin-right: 10rpx;
                    flex: 1;
                    overflow: hidden;
                }
                .num {
                    color: $old-price-color;
                }
            }

            .sign-bg {
                width: 100%;
                overflow: hidden;
                white-space: nowrap;

                .sign {
                    display: inline-block;
                    margin-right: 20rpx;
                    color: $sub-title-color;

                    &:last-child {
                        margin-right: 0rpx;
                    }
                }
            }

            .bottom {
                width: 100%;
                overflow: hidden;

                .time {
                    height: 28rpx;
                    line-height: 28rpx;
                    text-align: center;
                    border-radius: 4rpx;
                    padding: 0rpx 6rpx;
                    background: $time-grad-color;
                    color: $time-title-color;
                }

                .price {
                    margin-left: 10rpx;
                    color: $price-color;
                }

                .old-price {
                    margin-left: 12rpx;
                    color: $old-price-color;
                    text-decoration: line-through;
                }
            }

            .btn {
                position: absolute;
                right: 0;
                bottom: 0;
                width: 140rpx;
                height: 52rpx;
                background-color: $theme-color;
                border-radius: 8rpx;
                overflow: hidden;
                line-height: 52rpx;
                text-align: center;
                color: $bg-text-color;
            }
        }
    }
}
</style>
